<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <script type="text/javascript" src="assets/jwplayer.min.js"></script>
    <title>Various Dimensions</title>
    <link type="text/css" rel="stylesheet" href="assets/style.css" />

</head>
<body>

<h2>Various Dimensions</h2>

<div id="player"></div>
<script type="text/javascript">
function loadPlayer(width,height,back) {
    var options = {
        levels: [
            { file: 'http://content.bitsontherun.com/videos/bkaovAYt-injeKYZS.mp4' },
            { file: 'http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm' }
        ],
        height: height,
        image: 'http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg',
        plugins: {
            '../captions.js': {
                file: 'assets/bunny-ned.txt',
                back: back
            }
        },
        flashplayer: 'assets/player.swf',
        width: width
    };
    jwplayer("player").setup(options);
}
</script>


<ul>
    <li><a href="javascript:loadPlayer(320,180,false)">320x180, outlined</a></li>
    <li><a href="javascript:loadPlayer(320,180,true)">320x180, boxed</a></li>
    <li><a href="javascript:loadPlayer(480,270,false)">480x270, outlined</a></li>
    <li><a href="javascript:loadPlayer(480,270,true)">480x270, boxed</a></li>
    <li><a href="javascript:loadPlayer(640,360,false)">640x360, outlined</a></li>
    <li><a href="javascript:loadPlayer(640,360,true)">640x360, boxed</a></li>
    <li><a href="javascript:loadPlayer(800,450,false)">800x450, outlined</a></li>
    <li><a href="javascript:loadPlayer(800,450,true)">800x450, boxed</a></li>
</ul>


<p>
    Test in one Flash-enabled and in one HTML5/MP4 browser.</br>
    Fontsize and bottom alignment should <em>feel</em> fairly balanced with all dimensions.<br/>
    Don't forget to check in fullscreen and with controlbar shown or hidden.
</p>


</body>
</html>